<!DOCTYPE html>
<html lang="zh-cn">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>捕获页面DOM内容</title>
    <script src="./res/jquery-3.5.1.min.js"></script>
</head>

<body>
    <button>我叫你的名字你敢答应吗</button>
    <div>
        <label for="mobile">手机号</label>
        <input type="text" id="mobile" value="" placeholder="请输入手机号" autocomplete="off">
        <input type="text" id="remobile" value="" placeholder="" readonly autocomplete="off">
        <span id="mobileMsg"></span>
    </div>
</body>

</html>
<script>
    $(function(e) {
        let mobileRex = /^1[3456789]\d{9}$/;
        $('button').click(function(e) {
            e.preventDefault();
            let $mobile = $('#mobile').val();
            if ('' == $.trim($mobile)) {
                $('#mobile').focus();
                $('#mobileMsg').html('<p style="color:red">手机号不能为空,请输入正确手机号</p>');
            } else {
                if (!mobileRex.test($.trim($mobile))) {
                    $('#mobileMsg').text('请输入正确手机号');
                } else {
                    $('#remobile').val($mobile);
                }
            }
        });
        $('#mobile').keyup(function(e) {
            e.preventDefault();
            $('#mobileMsg').html('');
        });
    });
</script>